<template>
  <div class="register">
    <form @submit.prevent="submit">
      <group label-width="4em"
             label-margin-right="2em"
             gutter="0">
        <x-input title="手机号"
                 :max="11"
                 type="tel"
                 placeholder="请输入手机号码"
                 keyboard="number"
                 v-model="userInfo.userMobile"
                 class="input">
          <span slot="right"
                class="vi"
                v-show="show"
                @click="getCode"> 获取验证码</span>
          <span slot="right"
                class="vi count"
                v-show="!show"> {{count}}s重新获取</span>
        </x-input>
        <x-input title="验证码"
                 placeholder="请输入验证码"
                 keyboard="number"
                 is-type="tel"
                 v-model="verNumb"
                 @on-change='active=true'></x-input>
      </group>
    </form>
    <div class="btn flex"
         :class="{'active':active}"
         @click="submit">
      确定
    </div>

    <toast v-model="toastshow"
           type="text"
           width="200px"
           position="moddle">{{mesg}}~</toast>

  </div>
</template>
<script>
import { Cell, XInput, Group, Toast } from 'vux'
import * as API from '../../api'
import { mapGetters, mapActions } from 'vuex'
import { log } from 'util';
export default {
  components: {
    Cell,
    Group,
    XInput,
    Toast

  },
  data () {
    return {
      show: true,
      count: '',
      timer: null,
      active: false,
      toastshow: false,
      verNumb: '',
      mesg: '', toPath: ''
    }
  },
  created () {
    this.toPath = this.$route.query
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  methods: {
    ...mapActions(['initUser']),
    getCode () {
      const myreg = /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/
      if (this.userInfo.userMobile === '' || !myreg.test(this.userInfo.userMobile)) {
        this.toastshow = true
        this.mesg = '手机号码格式不正确'
      } else {
        const TIME_COUNT = 60
        if (!this.timer) {
          this.count = TIME_COUNT
          this.show = false
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= TIME_COUNT) {
              this.count--
            } else {
              this.show = true
              clearInterval(this.timer)
              this.timer = null
            }
          }, 1000)
        }
        this.$http.get(API.sendCode, {          params: {
            mobile: this.userInfo.userMobile
          }        }).then(res => {
          if (res.data.code === 1) {
            this.toastshow = true
            this.mesg = '服务器异常，请稍后再试'
          }
        }).catch(err => {
          console.log(err)
        })
      }
    },
    submit () {

      if (this.userInfo.userMobile === '') {
        this.mesg = '请填写手机号'
      } else if (this.verNumb === '') {
        this.mesg = '请填写验证码'
      } else {
        console.log(this.userInfo.userMobile);
        this.toastshow = false
        this.$http.get(API.register, {
          params: {
            openId: this.userInfo.openId,
            mobile: this.userInfo.userMobile,
            vlidateCode: this.verNumb
          }        }).then(res => {
          if (res.data.code === 500) {
            this.mesg = res.data.msg
            this.toastshow = true
          } else if (res.data.code === 0) {
            this.userInfo.loginStatus = 1
            this.initUser(this.userInfo)
            console.log(this.toPath);
            if (this.toPath === "/") {
              this.$router.push('/my')
            }
            else if (this.toPath.length) {
              console.log("youlailu");
              this.$router.push(this.toPath)
            } else {
              this.$router.go(-1)
            }

          } else if (res.data.code === 1) {
            this.mesg = '操作失败，请联系后台管理员'
          }
        }).catch(err => {
          console.log(err)
        })
      }
    },
    test () {
      this.active = true
    }
  }

}

</script>
<style lang="scss" scoped>
@import "../../assets/style/index.scss";
</style>
